<template>
	<view>
		<view class="cu-modal Modal" :class="modalName=='Modal'?'show':''">
			<!-- 版本更新 -->
			<view class="cu-dialog1">
				<view class="cu-bar bg-white justify-end">
					<view class="content"></view>
					<view class="action" style="padding-top: 50rpx;">
						<text class="cuIcons cuIcon-close text-red">提示</text>
					</view>
				</view>
				<view style="padding: 25rpx ;word-wrap:break-word;">版本更新</view>
				<view style="padding-top: 30rpx;border-top: 1px solid rgba(184, 198, 216,0.5);" @tap.stop="copy">确定</view>
			</view>
		</view>
		<!-- banner图 -->
		<view class="banner">
			<u-swiper :list="list" mode="none" height="300" border-radius="30"></u-swiper>
		</view>
		<!-- 公告 -->
        <u-notice-bar class="bar" style=""  @click="click" @getMore="click"  :list="listes" type="none" :more-icon="true"></u-notice-bar>
		
		<!-- bar -->
		<view class="prop" >
			<!-- #ifdef H5 -->
			<Bar style="width: 100%;"/>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<Bar />
			<!-- #endif -->
		</view>
		<!-- 排行榜 -->
		<view class="prop1">
			<view class="prop-title1">排行榜</view>
			<view class="prop-title2" @click="router">查看更多 <image src="../../static/to.png" mode=""></image></view>
		</view>
		<view class="sort">
			<view class="sort-item" v-for="(item,index) in sortes" :key="index" :class="'sort'+Number(index+1)">
				<image class="sort-image" :src="item.image || imglogo" mode="aspectFill"></image>
				<view class="sort-name" >{{str(item.name)}}</view>
				<view class="sort-price" >{{tag(item.profit)}}</view>
			</view>
		</view>
		<!-- 空多比 -->
		<view class="prop">
			<view class="prop-bg"></view>
			<view class="prop-title">空多比</view>
		</view>
		<view class="give">
			<view class="give-item1">
				<view class="item1-text1">BTC<text>/USDT</text>
				</view>
			</view>
			<view class="give-item2">
				<view class="item2" style="padding-right: 50rpx;">看多</view>
				<view class="item2" style="padding-left: 50rpx;">看空</view>
			</view>
			<view class="give-item3">
				<view class="item3-text1 color-fall">{{proint(form.long)}} %</view>
				<view class="item3-text2">
					<view class="text1"></view>
					<view class="text2">收益率</view>
					<view class="text1"></view>
				</view>
				<view class="item3-text3 color-fall">{{proint(form.short)}} %</view>
			</view>
			<view class="give-item4">
				<image src="../../static/rise.png"></image>
				<view class="speed">
					<!-- 进度比例 -->
					<view class="speed1"></view>
					<view class="speed2" :style="{'width':proint(form.long)+'%'}"></view>
				</view>
				<image src="../../static/fall.png"></image>
			</view>
			<view class="give-item5">
				<view class="item5 color-rise" style="padding-left: 100rpx;">看多</view>
				<view class="item5 color-fall" style="padding-right: 100rpx;">看空</view>
			</view>
		</view>
		<!-- 热门策略 -->
		<view class="prop">
			<view class="prop-bg"></view>
			<view class="prop-title"><text class="color-fall">热门</text>策略</view>
		</view>
		<view class="list" style="margin: 0rpx 35rpx;margin-bottom: 50rpx;">
			<Strategy />
		</view>
	</view>
</template>

<script>
	import Bar from './components/bar.vue'; //平均线列表
	import Strategy from './components/strategy.vue'; //策略
	import {web} from './home.js'
	export default {
		data() {
			return {
				imglogo:'https://zhugelianghua.oss-cn-beijing.aliyuncs.com/image/headimage.png',//默认头像
				listes: [],//公告
				modalName: null, //更新模态框
				list: [], //banner
				controll: 0, //仪表盘指数
				form: {}, //空多比
				sortes:[],//排行榜
			};
		},
		components: {
			Bar,
			Strategy
		},
		computed: {
			tag(){
				return t=>{
					if (!t) return '0.0000'
					return this.util.decimal(t)
				}
			},
			str(){
				return t=>{
					if(!t) return '无';
					if(t.length<=7) return t;
					return t.substring(0,4)+"***"+t.substring(t.length-3,t.length)
				}
			},
			proint() {
				return t => {
					if (!t) return '50'
					let data = Number(t * 100)
					return Number(data.toString().match(/^\d+(?:\.\d{0,4})?/))
				}
			},
			sell() {
				return (t, type) => {
					if (!t) return '卖出(0)'
					let data = '';
					if (t <= 15) {
						data = type == '1' ? '卖出' : '买入'
					} else if (t > 16) {
						data = type == '1' ? '强烈卖出' : '强烈买入'
					}
					return data + `(${t})`
				}
			},
		},
		onLoad() {
			this.bannerlist() //banner
			this.package() //版本号检查
			this.controller() //首页数据
		},
		onShow() {
			this.$store.dispatch('getUser') //获取用户本地资产
			this.notice()//公告
			this.Ranking()//排行榜
		},
		methods: {
			//排行榜 前三记录
			Ranking(){
				this.request.post({
					url:'order/getRankingList',
					params:{
						type:'3'
					}
				}).then(res => {
					this.sortes=[]
					this.sortes.push(res.data.data[1] || '',res.data.data[0] || '',res.data.data[2] || '')
				})
			},
			notice(){//公告
				this.request.post('guideMessage/list')
					.then(res => {
						this.listes =[res.data.data[0].headLine]//获取最新公告
					})
			},
			controller() {
				this.request('banner/home').then(res => {
					// 空多比
					this.form = JSON.parse(res.data.data.sellOrBuy).data.long_short[0]
				})
			},
			click(){//公告跳转
			this.$Router.push({
				path: '/pages/college/guide'
			})
			},
			
			copy() {
				this.$Router.push({
					path: '/pages/login/update'
				})
			},
			bannerlist() {
				this.request('banner/list?type=1').then(res => {
					this.list = res.data.data
				})
			},
			package() {
				//#ifdef APP-PLUS
				let that = this;
				plus.runtime.getProperty(plus.runtime.appid, ({
					version
				}) => {
					this.request.post('appUpload/get', {
						id_1: this.encrypt(2)
					}).then(res => {
						if (res.data.code !== 1) return;
						let url = res.data.data.hotterPackage; //链接
						let server = res.data.data.appVersion; //版本号
						let local = version //app版本 
						if (!this.checkVersion(version, server)) return;
						let update = true //有新版本
						this.$state.version = {
							server,
							local,
							update,
							url
						}
						if (res.data.data.silent_installation == '0') { //静默安装
							this.installApp(url);
						} else {
							this.modalName = 'Modal'
							uni.hideTabBar()
						}
					});
				});
				//#endif
			},
			checkVersion(mVersion, sVersion) {
				let m = mVersion.split('.');
				let s = sVersion.split('.');
				const mLen = m.length;
				const sLen = s.length;
				const maxLen = Math.max(mLen, sLen);
				const fill = Array(Math.abs(mLen - sLen)).fill('0');
				if (mLen < maxLen) m.push(...fill);
				if (sLen < maxLen) s.push(...fill);
				for (let i = 0; i < maxLen; i++) {
					if (Number(s[i]) > Number(m[i])) return true;
				}
				return false;
			},
			installApp(url) { //静默更新
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				uni.downloadFile({
					url,
					success: res => {
						if (res.statusCode === 200) {
							plus.runtime.install(res.tempFilePath, {
								force: false
							});
							setTimeout(() => {
								uni.hideLoading();
								this.pages() //更新完毕 重新启动
							}, 5000)
						}
					}
				});
			},
			pages() {
				plus.runtime.restart()
			},
			router(){
				this.$Router.push({
					path: '/pages/home/sort'
				})
			},
		}
	}
</script>
<style lang="scss">
	@include page;
	/deep/ uni-swiper{
	  background-color:transparent !important;
	 }
	 .test{
		 border: 1rpx solid var(--color);
	 }
	.banner {
		margin: 80rpx 25rpx 20rpx;
		/deep/ .uni-swiper-wrapper {
			overflow: hidden;
			position: relative;
			width: 100%;
			height: 100%;
			-webkit-transform: translateZ(0);
			transform: translateZ(0);
			background: $color-bgs;
		}
	}
	.bar{
		margin: 0rpx 10rpx;
		border-radius: 12rpx;
		// box-shadow:2rpx 2rpx 5rpx #E0E0E0;
	}
	.network {
		background: #011934;
		border-radius: 32rpx;
		margin: 25rpx;
		width: 93%;
		position: absolute;
		top: 380rpx;
		@include flex;
		justify-content: space-between;
		padding: 30rpx 0rpx;

		.network-grouy {
			text-align: center;
			width: 33.33%;
			line-height: 60rpx;
			color: $color-fu;
			font-weight: 600;

			.grouy-itme1 {
				font-size: 28rpx;

			}

			.grouy-itme2 {
				font-size: 36rpx;
				font-weight: bold;
				color: $light-color;
			}

			.grouy-itme3 {
				font-size: 26rpx;
			}
		}
	}
	.sort{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 25rpx;
		height: 25vh;
		.sort-item{
			background-color: #FFFFFF;
			border-radius: 16rpx;
			width: 32%;
			text-align: center;
			padding: 20rpx 0rpx;
			// border: 1px solid red;
			.sort-image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.sort-name{
				font-size: 30rpx;
				line-height: 50rpx;
				/*  #ifdef  APP-PLUS  */
				// line-height: 60rpx;
				// padding: 20rpx 0rpx;
				/*  #endif  */
				
			}
			.sort-price{
				font-size: 28rpx;
				font-weight: bold;
				color: $color-fall;
			}
		}
		.sort1{
			height: 270rpx;
			.sort-name{
				line-height: 80rpx;
				/*  #ifdef  APP-PLUS  */
				// line-height: 90rpx;
				
				/*  #endif  */
			}
		}
		.sort2{
			height: 300rpx;
			padding: 30rpx 0rpx 20rpx;
			.sort-name{
				line-height: 95rpx;
				/*  #ifdef  APP-PLUS  */
				  // line-height: 105rpx;
				  
				/*  #endif  */
			}
		}
		.sort3{
			height: 240rpx;
			
		}
	}
	.prop {
		margin: 25rpx;
		width: 93%;
		// border: 1px solid red;
		display: flex;
		// justify-content: space-between;
		.prop-bg {
			width: 10rpx;
			height: 40rpx;
			background: #F3C31B;
			margin-right: 15rpx;
			border-radius: 12rpx;
		}
		.prop-title{
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.prop1 {
		padding: 25rpx;
		@include flex;
		justify-content: space-between;
		.prop-title1{
			font-size: 32rpx;
			font-weight: bold;
		}
		.prop-title2{
			font-size: 24rpx;
			@include flex;
			image{
				margin-left: 10rpx;
				width: 15rpx;
				height: 20rpx;
			}
		}
	}
	.give {
		background: $color-bgs;
		border-radius: 16rpx;
		margin: 0rpx 25rpx 25rpx;
		width: 93%;
		padding: 40rpx 30rpx;

		.give-item1 {
			@include flex;
			justify-content: space-between;
			font-size: 32rpx;

			.item1-text1 {
				font-weight: bold;

				text {
					font-weight: 100;
					font-size: 26rpx;
					margin-right: 20rpx;
					color: #999999;
				}
			}

			.item1-text2 {
				font-weight: bold;
				font-size: 28rpx;

				text {
					font-weight: 100;
					font-size: 26rpx;
					margin-left: 20rpx;
					color: $color-fu;
				}
			}
		}

		.give-item2 {
			@include flex;
			justify-content: space-between;
			padding: 30rpx 0rpx 15rpx;

			.item2 {
				
// font-family: PingFang SC;
				text-align: center;
				width: 50%;
			}
		}

		.give-item3 {
			@include flex;
			justify-content: center;

			.item3-text1 {
				width: 28%;
				text-align: right;
			}

			.item3-text3 {
				width: 28%;

			}

			.item3-text2 {
				@include flex;
				width: 44%;

				justify-content: center;

				.text1 {
					width: 50rpx;
					height: 2rpx;
					background: #999999;
					margin: 0rpx 8rpx;
				}

				.text2 {
					border: 1rpx solid #999999;
					border-radius: 22rpx;
					padding: 5rpx 25rpx;
				}
			}
		}

		.give-item4 {
			@include flex;
			justify-content: space-between;
			padding-top: 25rpx;

			.speed {
				@include flex;
				width: 70%;
				height: 20rpx;
				border-radius: 20px;
				background: linear-gradient(270deg, #FE485A 0%, #FD707D 100%);

				.speed2 {
					height: 20rpx;
					border-radius: 20px;
					background: linear-gradient(92deg, #1677FF 0%, #19ACFF 100%);
				}
			}

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.give-item5 {
			@include flex;
			justify-content: space-between;
			font-size: 20rpx;
		}
	}

	.list {
		margin: 30rpx 35rpx 10rpx;
		background-color: $color-bgs;
		border-radius: 16rpx;
		padding: 40rpx 30rpx 20rpx;
		.list-title {
			line-height: 60rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog1 {
		height: 280rpx;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: $color-bgs;
		border-radius: 10upx;
		overflow: hidden;
	}
</style>
